<template>
  <div class="movie-scheduling">
    <!-- 影院信息 -->
    <div class="cinema-header fixed-header">
      <div class="cinema-info">
        <span style="font-size: 14px;"><span style="margin-right: 10px;font-size: 22px;color: red;" @click="goBack()">‹</span>{{ cinemaInfo.cinemaName || '加载中...' }}</span>
      </div>
    </div>

    <!-- 影院详细信息 -->
    <div class="cinema-details">
      <div class="address">
        {{ cinemaInfo.cinemaName || '加载中...' }}
      </div>
      <p class="location">{{ cinemaInfo.cinemaLocation || '地址加载中...' }}</p>
    </div>

    <!-- 功能选项卡 -->
    <div class="function-tabs">
      <div class="function-tag red-theme" @click="goToSnacks()">
        <div class="mini-tag">2元券可领</div>
        <div class="tag-title">观影套餐</div>
        <div class="tag-desc">小吃、周边35元起</div>
      </div>
      <div class="function-tag pink-theme">
        <div class="mini-tag">3折起</div>
        <div class="tag-title">影院券包</div>
        <div class="tag-desc">超低折扣，限量...</div>
      </div>
      <div class="function-tag yellow-theme">
        <div class="tag-title">影城卡</div>
        <div class="tag-desc">开卡享优惠</div>
      </div>
      <div class="function-tag cyan-theme">
        <div class="tag-title">领券</div>
        <div class="tag-desc">手快有，手慢无</div>
      </div>
    </div>

    <!-- 电影海报区域 -->
    <div class="movie-posters">
      <div class="poster-container">
        <div 
          v-for="(movie, index) in movies" 
          :key="index"
          :class="['poster', { active: movie.active }]"
          @click="selectMovie(index)"
        >
          <img :src="movie.filmurl" alt="暂无图片">
        </div>
      </div>
    </div>

    <!-- 电影信息 -->
    <div class="movie-info" v-if="currentMovie">
      <div class="movie-title">
        {{ currentMovie.filmname }} <span class="rating">{{ currentMovie.filmscore }}分</span>
      </div>
      <div class="movie-details">120分钟｜剧情｜{{ currentMovie.filmstarring }}</div>
    </div>
    <div class="movie-info" v-else>
      <div class="movie-title">加载中...</div>
    </div>

    <!-- 日期选择 -->
    <div class="date-selector">
      <div 
        v-for="(date, index) in dates" 
        :key="index"
        :class="['date', { active: date.active }]"
        @click="selectDate(index)"
      >
        <div class="day">{{ date.label }}</div>
        <div v-if="date.active" class="underline"></div>
      </div>
    </div>

    <!-- 优惠信息 -->
    <div class="promotions">
      <div class="promo-item">
        <span class="tag orange">领券</span>
        <span class="text">限时领券，立领即用，买票更优惠</span>
        <span class="count">3张优惠券 ›</span>
      </div>
      <div class="promo-item">
        <span class="tag yellow">影城卡</span>
        <span class="text">开卡享优惠</span>
        <span class="count">9.9元起开卡 ›</span>
      </div>
    </div>

    <!-- 排片时间表 -->
    <div class="showtimes">
      <div v-if="showtimes.length === 0" class="no-showtimes">
        暂无排片信息
      </div>
      <div 
        v-for="showtime in showtimes" 
        :key="showtime.id"
        class="showtime-item"
      >
        <div class="time-info">
          <div class="time">{{ showtime.startTime }}</div>
          <div class="end-time">{{ showtime.endTime }}散场</div>
        </div>
        <div class="format" style="flex: 1;">国语2D
          <div class="hall">{{ showtime.playHall }}号厅</div>
        </div>
        <div class="price-info">
          <div class="price">{{ showtime.price }}<span class="unit">元</span></div>
        </div>
        <button class="purchase-btn" @click="goToPurchase(showtime.id)">购票</button>
      </div>
    </div>

    <!-- 观影小吃 -->
    <div class="snacks-section">
      <div class="section-header">
        <h3>观影小吃</h3>
        <div class="subtitle">电影和可乐爆米花最配啦！❤️</div>
      </div>
      <div class="promotion">
        <span class="mini-tag">领券</span>
        <span class="text">您有共2元券可领，立即领取</span>
        <span class="count">1张可领 ></span>
      </div>
      
      <!-- 单人餐 -->
      <div class="meal-category" v-if="streetFoodListSingle && streetFoodListSingle.length > 0">
        <h4 class="category-title">单人餐</h4>
        <div class="snack-item" v-for="(item, index) in streetFoodListSingle" :key="item.id">
          <div class="item-tag" v-if="index == 0">销量最高</div>
          <div class="item-content">
            <img :src="item.imgUrl" alt="暂无图片" class="snack-img">
            <div class="item-info">
              <h4>{{item.name}}</h4>
              <div class="price">¥{{item.currentPrice}}</div>
            </div>
            <button class="purchase-btn">购买</button>
          </div>
        </div>
      </div>

      <!-- 双人餐 -->
      <div class="meal-category" v-if="streetFoodListDouble && streetFoodListDouble.length > 0">
        <h4 class="category-title">双人餐</h4>
        <div class="snack-item" v-for="item in streetFoodListDouble" :key="item.id">
          <div class="item-content">
            <img :src="item.imgUrl" alt="暂无图片" class="snack-img">
            <div class="item-info">
              <h4>{{item.name}}</h4>
              <div class="price">¥{{item.currentPrice}}</div>
            </div>
            <button class="purchase-btn">购买</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue'
import api from '@/utils/http'

const global=getCurrentInstance().appContext.config.globalProperties;

const cinemaInfo = ref({
  cinemaId: 1,
  cinemaName: '',
  cinemaLocation: ''
})

const movies = ref([])

const streetFoodListSingle = ref([])
const streetFoodListDouble = ref([])

const currentMovie = computed(() => {
  return movies.value.find(movie => movie.active)
})

const showtimes = ref([])

// 生成动态日期
const generateDates = () => {
  const dates = []
  const today = new Date()
  const monthNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  
  for (let i = 0; i < 3; i++) {
    const date = new Date(today)
    date.setDate(today.getDate() + i)
    
    const month = monthNames[date.getMonth()]
    const day = date.getDate()
    
    let label = ''
    if (i === 0) {
      label = `今天${month}月${day}日`
    } else if (i === 1) {
      label = `明天${month}月${day}日`
    } else {
      label = `后天${month}月${day}日`
    }
    
    dates.push({
      label,
      active: i === 0,
      date: date.toISOString().split('T')[0] // YYYY-MM-DD格式
    })
  }
  
  return dates
}

// 日期数据
const dates = ref(generateDates())

// 获取影院信息
const getCinemaInfo = async (cinemaId,filmId) => {
  try {
    const response = await api.get(`/movieScheduling/getCinemaInfo/${cinemaId}`)
    if (response.data) {
      cinemaInfo.value = response.data
      if (response.data.filmList && response.data.filmList.length > 0) {
        movies.value = response.data.filmList
        if(filmId){
          movies.value.forEach((film, index) => {
            film.active = film.filmid == filmId
          })
        }else{
          movies.value.forEach((film, index) => {
            film.active = index === 0
          })
        }
        
        if (movies.value.length > 0) {
          await getMovieScheduling()
        }
      }
      streetFoodListSingle.value = response.data.streetFoodList["1"]
      streetFoodListDouble.value = response.data.streetFoodList["2"]
    }
  } catch (error) {
    console.error('获取影院信息失败:', error)
  }
}

// 获取排片信息
const getMovieScheduling = async () => {
  try {
    const currentMovieData = currentMovie.value
    const selectedDate = dates.value.find(date => date.active)
    
    if (!currentMovieData || !selectedDate) return
    
    const requestData = {
      cinemaId: cinemaInfo.value.cinemaId,
      movieId: currentMovieData.filmid,
      schedulingDate: selectedDate.date
    }
    
    const response = await api.post('/movieScheduling/getMovieScheduling', requestData)
    if (response.data) {
      showtimes.value = response.data
    }
  } catch (error) {
    console.error('获取排片信息失败:', error)
  }
}

const selectDate = async (index) => {
  dates.value.forEach((date, i) => {
    date.active = i === index
  })
  await getMovieScheduling()
}

// 电影选择函数
const selectMovie = async (index) => {
  movies.value.forEach((movie, i) => {
    movie.active = i === index
  })
  
  // 重新获取排片信息
  await getMovieScheduling()
  
  // 自动滚动到选中的电影
  const container = document.querySelector('.poster-container')
  const selectedPoster = document.querySelectorAll('.poster')[index]
  if (container && selectedPoster) {
    const containerWidth = container.clientWidth
    const posterWidth = selectedPoster.clientWidth
    const scrollLeft = selectedPoster.offsetLeft - (containerWidth / 2) + (posterWidth / 2)
    container.scrollTo({
      left: scrollLeft,
      behavior: 'smooth'
    })
  }
}

const goToSnacks = () => {
  global.$router.push({
    path: '/streetFood',
    query: {
      cinemaId: cinemaInfo.value.cinemaId
    }
  })
}

const goBack = () => {
  global.$router.back()
}

const goToPurchase = (showtimeId) => {
  global.$router.push({
    path: '/chooseSeat',
    query: {
      showtimeId: showtimeId
    }
  })
}

onMounted(async () => {
  const cinemaId = global.$route.query.cinemaId 
  const filmId = global.$route.query.filmId

  await getCinemaInfo(cinemaId,filmId) 
})
</script>

<style scoped>
.movie-scheduling {
  background: #f5f5f5;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: white;
  font-size: 14px;
  font-weight: 600;
}

.time {
  font-weight: 600;
  color: #333;
}

.status-bar .center {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ff5722;
  font-weight: 600;
}

.maoyan-icon {
  color: #ff5722;
}

.status-bar .right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.signal-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.signal-bars .bar {
  width: 3px;
  background: #333;
  border-radius: 1px;
}

.signal-bars .bar:nth-child(1) { height: 4px; }
.signal-bars .bar:nth-child(2) { height: 6px; }
.signal-bars .bar:nth-child(3) { height: 8px; }
.signal-bars .bar:nth-child(4) { height: 10px; }

.wifi-icon {
  font-size: 16px;
}

.battery {
  color: #333;
  font-weight: 600;
}

.cinema-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #eee;
}

.back-btn {
  font-size: 30px;
  color: #ff5722;
  margin-right: 12px;
  cursor: pointer;
}

.cinema-info {
  flex: 1;
  margin-left: 0;
}

.cinema-info h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.actions {
  display: flex;
  gap: 16px;
}

.star, .refresh {
  font-size: 20px;
  color: #666;
  cursor: pointer;
}

.cinema-details {
  padding: 8px 16px 16px;
  background: white;
  margin-bottom: 8px;
}

.address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.location {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.function-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: white;
  padding: 16px;
  gap: 8px;
  margin-bottom: 8px;
}

.function-tag {
  padding: 8px 6px;
  border-radius: 6px;
  text-align: center;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.function-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.function-tag.red-theme {
  background: #FFF1F0;
  border-color: #FFD1CC;
}

.function-tag.pink-theme {
  background: #FFF0F6;
  border-color: #FFCDE3;
}

.function-tag.yellow-theme {
  background: #FFFBE6;
  border-color: #FFEC99;
}

.function-tag.cyan-theme {
  background: #E6FFFB;
  border-color: #87E8DE;
}

.mini-tag {
  display: inline-block;
  background: #ff4757;
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 8px;
  margin-bottom: 4px;
  font-weight: 500;
}

.tag-title {
  font-size: 11px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
  line-height: 1.1;
}

.cyan-theme .tag-title {
  color: #13c2c2;
  font-weight: 600;
}

.tag-desc {
  font-size: 9px;
  color: #666;
  line-height: 1.1;
  opacity: 0.8;
}

.cyan-theme .tag-desc {
  color: #13c2c2;
  opacity: 0.8;
}

.movie-posters {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.9) 0%, rgba(101, 67, 33, 0.8) 100%);
  padding: 20px 0;
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.menu-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 20px;
  z-index: 5;
}

.poster-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 20px 30px 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.poster-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.poster {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0; /* 防止压缩 */
  border: 3px solid white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  opacity: 0.7;
  transform: scale(0.9);
}

.poster:hover {
  opacity: 0.9;
  transform: scale(0.95);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.poster.active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  z-index: 10;
  border: 4px solid white;
}

.poster.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.poster img {
  width: 80px;
  height: 110px;
  object-fit: cover;
  display: block;
  transition: all 0.4s ease;
}

.poster.active img {
  width: 80px;
  height: 110px;
}

@media (max-width: 768px) {
  .poster-container {
    padding: 0 15px;
    gap: 12px;
  }
  
  .poster {
    border: 2px solid white;
  }
  
  .poster.active {
    border: 3px solid white;
    transform: scale(1.05);
  }
  
  .poster img {
    width: 70px;
    height: 95px;
  }
  
  .poster.active img {
    width: 70px;
    height: 95px;
  }
  
  .poster.active::after {
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
  }
}

.movie-info {
  background: white;
  padding: 16px;
  text-align: center;
}

.movie-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.rating {
  color: #ff6b35;
  font-size: 16px;
  margin-left: 8px;
}

.movie-details {
  font-size: 14px;
  color: #666;
}

.date-selector {
  display: flex;
  background: white;
  padding: 16px;
  gap: 32px;
  margin-bottom: 8px;
}

.date {
  position: relative;
  cursor: pointer;
}

.day {
  font-size: 16px;
  color: #666;
  padding-bottom: 8px;
}

.date.active .day {
  color: #ff5722;
  font-weight: 600;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff5722;
}

.promotions {
  background: white;
  margin-bottom: 8px;
}

.promo-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.promo-item:last-child {
  border-bottom: none;
}

.promo-item .text {
  flex: 1;
  margin-left: 8px;
  font-size: 14px;
  color: #333;
}

.count {
  font-size: 14px;
  color: #999;
}

.showtimes {
  background: white;
  margin-bottom: 8px;
}

.no-showtimes {
  text-align: center;
  padding: 40px 16px;
  color: #999;
  font-size: 14px;
}

.showtime-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.showtime-item:last-child {
  border-bottom: none;
}

.time {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.end-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.hall {
  font-size: 12px;
  color: #666;
}

.format {
  margin: 0 16px;
  font-size: 14px;
  color: #333;
}

.price-info {
  text-align: right;
  margin-right: 16px;
}

.price {
  font-size: 16px;
  color: #ff5722;
  font-weight: 600;
}

.unit {
  font-size: 12px;
}

.original-price {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.price-old {
  margin-left: 4px;
}

.buy-btn {
  background: #ff5722;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
}

.snacks-section {
  background: white;
}

.section-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.subtitle {
  font-size: 12px;
  color: #999;
}

.promotion {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.promotion .text {
  flex: 1;
  margin-left: 8px;
  font-size: 14px;
  color: #333;
}

.meal-category {
  padding: 16px;
  border-bottom: 8px solid #f5f5f5;
}

.meal-category:last-child {
  border-bottom: none;
}

.category-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.snack-item {
  padding: 12px 0;
  position: relative;
  border-bottom: 1px solid #f8f8f8;
}

.snack-item:last-child {
  border-bottom: none;
}

.item-tag {
  position: absolute;
  top: 12px;
  left: 0;
  background: #ff4757;
  color: white;
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 4px;
  z-index: 2;
}

.item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.snack-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  font-size: 13px;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.item-info .price {
  font-size: 16px;
  color: #ff5722;
  font-weight: 600;
}

.purchase-btn {
  background: #ff5722;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
